<template>
  <div class="cart">
    <van-nav-bar title="购物车"
      :right-text="rightText"
      @click-right="editCart"
      :z-index="10"
      fixed />
    <div class="nogood" v-if="!this.cartList.length">
      <div>购物车空空的，快去购物吧~</div>
      <van-button type="primary" class="btn" @click="goHome">去首页</van-button>
    </div>
    <van-checkbox-group class="card-goods"
      v-model="checkedGoods">
      <van-checkbox class="card-goods__item"
        v-for="item in cartList"
        :key="item.areaId"
        :name="item.areaId">
        <van-card :title="item.areaName"
          :desc="item.desc"
          :num="item.num"
          :price="item.price"
          :thumb="item.cartImg"
          class="">
          <div slot="footer"
            class="footer">
            <span class="add"
              @click.stop="reduceCount(item,item.num)">
              <van-button class="btn"
                size="mini">-</van-button>
            </span>
            <span class="input"
              @click.stop="showModal(item)">
              <span class="input-edit">{{item.num}}</span>
            </span>
            <span class="reduce"
              @click.stop="addCount(item,item.num)">
              <van-button class="btn"
                size="mini">+</van-button>
            </span>
          </div>
        </van-card>
      </van-checkbox>
    </van-checkbox-group>
    <van-dialog v-model="modalShow"
      show-cancel-button
      :before-close="beforeClose"
      title="数量修改">
      <div class="modal-box">
        <span class="add"
          @click.stop="reduceEditCount">
          <van-button class="btn"
            size="mini">-</van-button>
        </span>
        <span class="input">
          <input type="number"
            v-model.number="editNum" />
        </span>
        <span class="reduce"
          @click.stop="addEditCount">
          <van-button class="btn"
            size="mini">+</van-button>
        </span>
      </div>
    </van-dialog>
    <van-submit-bar class="cart-bar"
      v-if="this.cartList.length"
      :price="isEdit?undefined:totalPrice"
      :label="isEdit?'':'合计'"
      :button-text="isEdit?'删除':'提交订单'"
      @submit="onSubmit">
      <span @click="selectAll"
        class="selectAll">
        <van-checkbox v-model="checkedAll">{{checkedAllMsg}}</van-checkbox>
      </span>
    </van-submit-bar>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant';

export default {
  name: 'Cart',
  data() {
    return {
      cartList: [
       {"cartId": 5,
        "uid": 2,
        "areaId": 9,
        "createTime": "2022-03-15 17:47:32",
        "areaName": "大唐芙蓉园",
        "areaPrice": 120,
        "num": 5,
        "totalMoney": null,
        "desc": "陕西必逛的十大景点",
        "cartImg": "http://r8uara5jv.hn-bkt.clouddn.com/ed95eab51e1d4528b1edbb512966aed1.jpg",
        "areaCount": 20
        },
      ],
      checkedGoods: [],
      checkedAll: false,
      checkedAllMsg: '全选',
      deleteCart: [],
      isEdit: false,
      modalShow: false,
      editGood: {},
      editNum: 0,
      timer: 0
    };
  },
  activated() {
    this.init();
    if (localStorage.getItem('token') == null || localStorage.getItem('token') == '') {
      this.$router.push('/auth');
    }
  },
  methods: {
    init() {
      var params = {
        token: localStorage.getItem('token')
      };
      getCart(params)
        .then(result => {
          this.cartList = result.data;
          this.checkedGoods = [];
        })
        .catch(error => {
          console.log(error);
        });
    },
    editCart() {
      this.isEdit = !this.isEdit;
    },
    reduceCount(item, count) {
      if (!count && count !== 0) {
        Toast({
          position: 'bottom',
          message: '数值不正确~'
        });
        return;
      }
      if (count <= 1) {
        Toast({
          position: 'bottom',
          message: '不能再少了~'
        });
        return;
      }
      count--;
      item.Cartcount = count;
      this.updateCartCountFun(item.cartId, count);
    },
    addCount(item, count) {
      if (!count && count !== 0) {
        Toast({
          position: 'bottom',
          message: '数值不正确~'
        });
        return;
      }
      if (count >= item.Goodcount) {
        Toast({
          position: 'bottom',
          message: '只能添加20张票哦~'
        });
        return;
      }
      count++;
      item.Cartcount = count;
      this.updateCartCountFun(item.cartId, count);
    },
    reduceEditCount() {
      if (!this.editNum && this.editNum !== 0) {
        Toast({
          position: 'bottom',
          message: '数值不正确~'
        });
        return;
      }
      if (this.editNum <= 1) {
        Toast({
          position: 'bottom',
          message: '不能再少了~'
        });
        return;
      }
      this.editNum--;
    },
    addEditCount() {
      if (!this.editNum && this.editNum !== 0) {
        Toast({
          position: 'bottom',
          message: '数值不正确~'
        });
        return;
      }
      if (this.editNum >= this.editGood.Goodcount) {
        Toast({
          position: 'bottom',
          message: '只有这么多了~'
        });
        return;
      }
      this.editNum++;
    },
    showModal(item) {
      this.modalShow = true;
      this.editGood = item;
      let count = item.Cartcount;
      this.editNum = count;
    },
    goHome() {
      this.$router.push('/');
    },
    beforeClose(action, done) {
      if (action === 'confirm') {
        if (!this.editNum) {
          Toast({
            position: 'bottom',
            message: '数值不正确~'
          });
          done(false);
          return;
        }
        if (this.editNum > this.editGood.Goodcount) {
          Toast({
            position: 'bottom',
            message: '库存不够了~'
          });
          done(false);
          return;
        }
        if (this.editNum < 1) {
          Toast({
            position: 'bottom',
            message: '数量太少了~'
          });
          done(false);
          return;
        }
        this.editGood.Cartcount = this.editNum;
        this.updateCartCountFun(this.editGood.Goodid, this.editNum);
        done();
      } else {
        done();
      }
    },
    formatPrice(price) {
      return price;
    },
    selectAll() {
      if (this.checkedAll) {
        for (let i = 0; i < this.cartList.length; i++) {
          this.checkedGoods.push(this.cartList[i].Goodid);
        }
        this.checkedAllMsg = '全不选';
      } else {
        this.checkedGoods = [];
        this.checkedAllMsg = '全选';
      }
    },
    updateCartCountFun(id, count) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        updateCartCount({ cartId: id, num: count })
          .then(result => {
            console.log(result);
          })
          .catch(error => {
            console.log(error);
          });
      }, 500);
    },
    onSubmit() {
      for (let y = 0; y < this.checkedGoods.length; y++) {
        for (let x = 0; x < this.cartList.length; x++) {
          if (this.checkedGoods[y] == this.cartList[x].Goodid) {
            this.deleteCart.push(this.cartList[x].cartId);
          }
        }
      }
      if (this.isEdit) {
        if (!this.checkedGoods.length) {
          Toast({
            position: 'bottom',
            message: '没有选择物品~'
          });
          return;
        }
        Dialog.confirm({
          title: '警告',
          message: '确实要删除吗?'
        }).then(() => {
          var params = {
            delId: this.deleteCart
          };
          console.log(params);
          delFromCart(params)
            .then(result => {
              console.log(result);
              this.$toast.success('删除成功');
              this.init();
            })
            .catch(error => {
              console.log(error);
            });
        });
      } else {
        if (!this.checkedGoods.length) {
          Toast({
            position: 'bottom',
            message: '没有选择物品~'
          });
          return;
        }
        var orderGood = this.cartList.filter(item => {
          if (this.checkedGoods.indexOf(item.Goodid) !== -1) {
            return item;
          }
        });
        this.setOrderGood(orderGood);
        this.$router.push('/Order');
      }
    }
  },
  computed: {
    totalPrice() {
      let all = 0;
      this.cartList.forEach(item => {
        all += this.checkedGoods.indexOf(item.Goodid) !== -1 ? item.GoodPrice * item.Cartcount : 0;
      });
      return all * 100;
    },
    rightText:function(){
      if (this.cartList.length) {
        return this.isEdit ? '完成' : '编辑';
      } else {
        return '';
      }
    },
  },
  watch: {
    checkedGoods() {
      if (this.checkedGoods.length === this.cartList.length) {
        this.checkedAll = true;
        this.checkedAllMsg = '全不选';
      }
      if (this.checkedGoods.length < this.cartList.length) {
        this.checkedAll = false;
        this.checkedAllMsg = '全选';
      }
    }
  }
};
</script>

<style  scoped>
.cart{
  margin-bottom: 120px;
}
.card-goods{
  padding-top :46px;
  padding-bottom :0;
  background-color :#fff;
}
.card-goods__item{
  position: relative;
  background-color: #fafafa;
  border-bottom :1px solid #e5e5e5;
}
.modal-box{
  margin :20px 0;

}

.footer .modal-box{
  display :flex;
  justify-content :center;
  align-items :center;

}
.input .input-edit{
  padding :0 10px;
  font-size :14px;
  text-align :center;
  background-color: #fafafa;
  border-bottom: 1px solid #f6b539;
  margin :0 6px;
  }
.nogood{
  position :absolute;
  width :220px;
  text-align :center;
  color :#666;
  left :50%;
  top :50%;
  transform: translate(-50%, -50%);
  }

.btn{
  margin-top :16px;
}

.selectAll{
  margin-left: 5px;
}
.cart-bar{
  margin-bottom: 50px;
}
.van-card{
  width: 150%;
}

</style>>


